<template>
	<!-- block 空标签 -->
	<view>
		<!-- 1.0 搜索框组件复用 -->
		<search />
		<view class="cate">
			<!-- 滚动容器 scroll-y 允许 y 轴滚动 -->
			<scroll-view class="cate_left" scroll-y>
				<view 
					v-for="(item,index) in cateLeft" 
					:key="item.id"
					class="cate_left_item"
					:class="{ active: activeIndex === index  }"
					@tap="changeTabsIndex(index)"
				>
					{{item.name}}
				</view>
			</scroll-view>
			<!-- 右滚动容器 - 难点：列表嵌套 -->
			<scroll-view class="cate_right" scroll-y>
				<block v-for="item in cateRight" :key="item.cat_id">
					<!-- 隐藏没有子元素的标题 -->
					<view v-if="item.children" class="cate_right_title">{{ item.cat_name }}</view>
					<view class="cate_right_list">
						<navigator 
							v-for="item2 in item.children" 
							:key="item2.cat_id"
							class="cate_right_item"
							:url="'/pages/goods_list/main?cid=' + item2.cat_id"
							hover-class="none"
						>
							<image class="cate_right_item_image" :src="item2.cat_icon" />
							<text class="cate_right_item_text">{{item2.cat_name}}</text>
						</navigator>	
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	/* 
		分类页数据缓存思路
			1. 获取有没有分类页的缓存
				1.1. 没有缓存  -  发送网络请求获取数据 -保存到本地
				1.2  有缓存    -  看数据有没有过期
						1.2.1 没有过期 - 直接使用
						1.2.2 过期了   - 重新发网络请求

		新知识点：本地缓存（本地存储）
			设置：
				uni.setStorageSync('键名称', 值);
			获取：
				const 值 = uni.getStorageSync('键名称');

	*/
	// 导入组件
	import search from '@/components/search/main';
	// 用声明一个变量，用于存放所有的分类数据
	// 	  cateAll     不直接用于页面渲染 - 没放到 data 中(性能更好)
	// 		cateLeft    左边列表 - 列表渲染 - 放到 data 中
	// 		cateRight   右边列表 - 列表渲染 - 放到 data 中
	let cateAll = [];
	// uni-app 行为写这里
	export default {
		components:{
			search
		},
		data() {
			return {
				cateLeft: [],
				cateRight: [],
				activeIndex: 0,
			}
		},
		onLoad() {
			// this.getCateData();
			// 更新全局的 cateAll 变量
			cateAll = uni.getStorageSync('cateAll');
			// console.log(cateAll);
			if(!cateAll){
				console.log('❌无缓存，发起新的请求');
				this.getCateData();
			}else{
				console.log('✅有缓存，还要检查数据是否过期');
				// 现在的时间
				const nowTime = new Date();
				// 过期的事件
				const endTime = uni.getStorageSync('cateAllEndTime');
				// 如果
				if(nowTime > endTime){
					console.log('😢超过10分钟有效时间，重新发起网络请求');
					this.getCateData();
				}else{
					console.log('😀离上一次请求没到10分钟，直接使用本地存储的数据');
					// 左侧分类数据绑定
					this.cateLeft = cateAll.map(item=>({ id: item.cat_id, name: item.cat_name }));
					// 右侧分类数据绑定
					this.cateRight = cateAll[0].children;
				}
			}
		},
		// uni-app 事件写到 methods 中
		methods: {
			changeTabsIndex(index){
				// 改变索引影响左侧的选中状态
				this.activeIndex = index;
				// 清空数组，间接让滚动条初始化
				this.cateRight = [];
				setTimeout(()=>{
					// 从大数组中根据点击的索引获取到对应右侧的数据
					this.cateRight = cateAll[index].children;
				}, 20);
			},
			async getCateData(){
				// 获取分类页所有数据
				cateAll = await this.$https.get('/categories');
				// 左侧分类数据绑定
				this.cateLeft = cateAll.map(item=>({ id: item.cat_id, name: item.cat_name }));
				// 右侧分类数据绑定
				this.cateRight = cateAll[0].children;
				// 把获取到的数据存到本地
				uni.setStorageSync('cateAll', cateAll);
				// 过期时间
				const cateAllEndTime = +new Date() + 10 * 60 * 1000;
				// 设置过期时间进去
				uni.setStorageSync('cateAllEndTime', cateAllEndTime);
				// console.log('分类所有数据',cateAll);
			}
		}
	}
</script>

<style lang="less">
	.cate{
		display: flex;
		.cate_left{
			width:182rpx;
			// 视口总高度 - 搜索框高度 = 滚动容器高度
			height: calc(100vh - 100rpx);
			/* #ifdef H5 */
			// 浏览器端：视口总高度 - 搜索框高度 - 头部导航高 - 底部tabBar高 = 滚动容器高度
			height: calc(100vh - 100rpx - 44px - 50px);
			/* #endif */
			background-color: #F3F3F3;
			.cate_left_item{
				font-size: 28rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.active{
				position: relative;
				color: #EB4450;
				font-weight: 700;
				&::before{
					content: '';
					position: absolute;
					left:0;
					width: 5rpx;
					top:20rpx;
					bottom: 20rpx;
					background-color: #EB4450;
				}
			}
		}
		.cate_right{
			flex: 1;
			// 视口总高度 - 搜索框高度 = 滚动容器高度
			height: calc(100vh - 100rpx);
			/* #ifdef H5 */
			// 浏览器端：视口总高度 - 搜索框高度 - 头部导航高 - 底部tabBar高 = 滚动容器高度
			height: calc(100vh - 100rpx - 44px - 50px);
			/* #endif */
			.cate_right_title{
				display: flex;
				justify-content: center;
				align-items: center;
				height: 80rpx;
				&::before,
				&::after{
					content: '/';
					color:#999;
					margin: 0 5rpx;
				}
			}
			.cate_right_list{
				display: flex;
				flex-wrap: wrap;
				.cate_right_item{
					width: 33%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					padding: 20rpx 0;
					.cate_right_item_image{
						width: 120rpx;
						height: 120rpx;
					}
					.cate_right_item_text{
						font-size: 22rpx;
					}
				}
			}
		}
	}
</style>
